<template>
	<view :style="[{paddingTop:CustomBar + 'px'}]">
		<cu-custom bgColor="bg-gradual-blue" fatherCss="box-shadow:none" :isBack="false">
			<block slot="content">超值游玩</block>
		</cu-custom>
		<view class="tourism-head bg-gradual-blue">
			<image class="bg" src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/%E5%85%8D%E5%8D%95%E9%80%9AApp/tourism-bg.png"
			 mode=""></image>
			<view class="part-one">
				<view class="header">
					<view class="search"  @click='nav' :data-url="'/pages/search'">
						<image class="icon" src="http://xarkbucket.oss-cn-hangzhou.aliyuncs.com/search.svg"></image>
						<input placeholder='请输入景区名称...' disabled placeholder-class="placeholder" @click='search'></input>
					</view>
				</view>
				<view class="title">
					人气推荐
				</view>
			</view>
			<view class="photos">
				<scroll-view class="bookshelf-content-photo" scroll-x="true">
					<block v-for="(item,index) in headData" :key="index">
						<view class="photo-img"  :data-id="item.bid" @click="goDetailNew">
							<image :src="index==0?item.img:item.src" mode=""></image>
							<view class="">{{item.name}}</view>
						</view>
					</block>
				</scroll-view>
			</view>
		</view>
		<view class="cu-bar">
			<view class="action sub-title" style="margin-left:24rpx;">
				<text class="text-xl text-bold text-blue">为您推荐</text>
				<text class="bg-blue" style="width:2rem"></text>
			</view>
		</view>
		<!-- 筛选项 备注CustomBar为导航栏高度-->
		<!-- <view class="filter-style" id="sl-filter">
			<sl-filter :menuList="menuList" ref="slFilter" :topFixed="topFixed" :CustomBar="CustomBar" themeColor="#f34930"
			 titleColor="#333333" @result="changeFilter"></sl-filter>
		</view> -->
		<view class="tui-container">
			<view class="tui-extend-box">
				<block v-for="(item,index) in shopsList" :key="index" v-if="(index+1)%2!=0">
					<view class="tui-extend-item" :data-id="item.id" @click="goDetailNew">
						<image class="image" :src="item.shop_image" mode=""></image>
						<view class="item-content">
							<view class="tui-title">
								{{item.name}}
							</view>
							<view class="tags">
								<uni-tag v-for="(tag,i) in item.tags" :key="i" inverted="true" :text="tag" size="small" :type="colorList[i]"></uni-tag>
							</view>
							<view class="tui-sub-title">离我还有{{item.distance}}</view>
							<view class="bottom">
								<view class="text-price text-colorP">{{item.low_price}}</view>
								<view class="">
									{{item.num}}人已付款
								</view>
							</view>
						</view>
					</view>
				</block>
			</view>
			<view class="tui-extend-box">
				<block v-for="(item,index) in shopsList" :key="index" v-if="(index+1)%2==0">
					<view class="tui-extend-item" :data-id="item.id" @click="goDetailNew">
						<image class="image" :src="item.shop_image" mode=""></image>
						<view class="item-content">
							<view class="tui-title">
								{{item.name}}
							</view>
							<view class="tags">
								<uni-tag v-for="(tag,i) in item.tags" :key="i" inverted="true" :text="tag" size="small" :type="colorList[i]"></uni-tag>
							</view>
							<view class="tui-sub-title">离我还有{{item.distance}}</view>
							<view class="bottom">
								<view class="text-price text-colorP">{{item.low_price}}</view>
								<view class="">
									{{item.num}}人已付款
								</view>
							</view>
						</view>
					</view>
				</block>
			</view>
		</view>
		<tui-divider width="60%" :gradual="true" v-if="noMoreShow">更多没有啦~</tui-divider>
	</view>
</template>

<script>
	import slFilter from '@/components/sl-filter/sl-filter.vue';
	import uniTag from "../component/uni-tag.vue";
	export default {
		components: {
			slFilter,
			uniTag
		},
		data() {
			return {
				CustomBar: this.CustomBar,
				colorList: ['success', 'primary', 'warning', 'error'],
				menuList: [{
						title: '全部景点',
						key: 'zhoubian',
						detailList: [{
								title: '自然景区',
								value: 'nature'
							},
							{
								title: '名胜古迹',
								value: 'histor'
							},
							{
								title: '激爽漂流',
								value: 'drift'
							},
							{
								title: '动植物园',
								value: 'animal'
							},
							{
								title: '水上乐园',
								value: 'water'
							},
							{
								title: '动植物园',
								value: 'animal'
							},
							{
								title: '温泉',
								value: 'hotWater'
							},
							{
								title: '度假村',
								value: 'holiday'
							},
							{
								title: '公园游乐场',
								value: 'park'
							}
						]
					},
					{
						title: '智能排序',
						key: 'jingxuan',
						detailList: [{
								title: '人气推荐',
								value: 'hot'
							},
							{
								title: '距离优先',
								value: '2km'
							},
							{
								title: '销量优先',
								value: 'sale'
							}
						]
					},
					{
						title: '价格排序',
						key: 'quanguo',
						detailList: [{
								title: '升序',
								value: 'priceUp'
							},
							{
								title: '降序',
								value: 'priceDown'
							}
						]
					},
				],
				page: 1,
				pageCount: 0,
				shopsList: [],
				navScrollHeight: 0,
				isStyle: false,
				topFixed: false,
				noMoreShow: false,
				headData:[]
			}
		},
		methods: {},
		onPullDownRefresh() {
			this.getDataNew()
			this.getCommendNew()
			setTimeout(function() {
				uni.showToast({
					title: '刷新成功'
				})
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onLoad() {
			var that = this
			this.coordinate = uni.getStorageSync('coordinate');
			this.getDataNew()
			this.getCommendNew()
			const query = uni.createSelectorQuery().in(this);
			query.select('#sl-filter').boundingClientRect(data => {
				that.navScrollHeight = data.top - that.CustomBar;
			}).exec();
		},
		// 触底加载更多
		onReachBottom() {
			this.page++;
			this.getDataNew();
		},
		onPageScroll(e) {
			var that = this
			if (e.scrollTop >= this.navScrollHeight) {
				that.topFixed = true
			} else {
				that.topFixed = false
			}
		},
		methods: {
			// 跳转
			nav(e) {
				// 处理连锁商家的方法
				var isNav = e.currentTarget.dataset.isnav
				if (isNav) return
				var url = e.currentTarget.dataset.url
				if (url) {
					uni.navigateTo({
						url: url
					})
				}
			},
			getCommendNew() {
				var that = this;
				this.$request({
					url: '/shop/getTravelCommand',
					success: res => {
						if (res.data.status == 1) {
							that.headData = res.data.data
						}
						uni.hideLoading()
					},
					fail: () => {},
					complete: () => {}
				});
			},
			// 去详情
			goDetailNew(e) {
				var id = e.currentTarget.dataset.id
				uni.navigateTo({
					url: '/pages/scenicDetail?busId=' + id
				})
			},
			getDataNew() {
				var that = this;
				if (this.pageCount != 0 && this.page >= this.pageCount) {
					that.noMoreShow = true
				}
				this.$request({
					url: '/Shop/getTravelShop',
					data: {
						latitude: that.coordinate.latitude,
						longitude: that.coordinate.longitude,
						page: that.page,
						is_page: true,
						category_id: '6',
					},
					success: res => {
						if (res.data.status == 1) {
							res.data.data.data.forEach(item => {
								item.tags = item.tags.length > 2 ? item.tags.splice(0, 2) : item.tags
								that.shopsList.push(item)
							})
							that.pageCount = res.data.data.pageCount
							that.page += 1
						}
						uni.hideLoading()
					},
					fail: () => {},
					complete: () => {}
				});
			},
			// 筛选回调
			changeFilter(e) {
				// 动态改变筛选条件的方法
				// this.$refs.slFilter.resetMenuList(newMenuList)
				console.log(e)
			},
		}
	}
</script>

<style>
	page {
		background: #f5f5f5;
		-webkit-font-smoothing: antialiased;
	}

	.share-heade {
		display: inline-block;
		width: 40rpx;
		height: 40rpx;
		font-size: 32rpx;
		position: absolute;
		right: 20rpx;
		bottom: 20rpx;
	}

	.tourism-head {
		width: 100%;
		height: 480rpx;
		position: relative;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		border-radius: 0rpx 0rpx 8rpx 8rpx;
	}

	.part-one {
		width: 100%;
		padding: 0 24rpx;
		box-sizing: border-box;
	}

	.bg {
		width: 100%;
		height: 500rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
	}

	/* 搜索 */

	.header {
		display: flex;
		box-sizing: border-box;
		align-items: center;
		height: 60rpx;
		width: 100%;
		background: #fff;
		border-radius: 30rpx;
		margin-top: 40rpx;
	}

	.search {
		flex: 1;
		height: 60rpx;
		background: #f3f3f3;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		border-radius: 30rpx;
		padding: 0 20rpx;
		background: #fff;
		z-index: 1;
	}

	.placeholder {
		color: #999;
		font-size: 26rpx;
	}

	.search .icon {
		width: 35rpx;
		height: 40rpx;
	}

	.search input {
		flex: 1;
		box-sizing: border-box;
		padding-left: 20rpx;
		font-size: 28rpx;
		color: #999;
		background: #fff;
	}

	.title {
		font-size: 34rpx;
		font-weight: bold;
		letter-spacing: 1rpx;
		color: #ffffff;
		margin: 45rpx 0 30rpx;
	}


	.bookshelf-content-photo {
		white-space: nowrap; // 滚动必须加的属性
		width: 100%;
	}

	.photos {
		width: 100%;
		padding-bottom: 20rpx;
		background: rgba(0, 0, 0, 0);
	}

	.photos .photo-img:nth-child(1) {
		margin-left: 24rpx;
	}

	.photos .photo-img {
		width: 240rpx;
		height: 240rpx;
		display: inline-block;
		vertical-align: top;
		margin-right: 24rpx;
		border-radius: 4rpx;
	}

	.photos .photo-img image {
		width: 240rpx;
		height: 180rpx;
		display: inline-block;
		float: left;
		border-radius: 8rpx 8rpx 0 0;
	}

	.photos .photo-img view {
		flex: 1;
		width: 100%;
		height: 60rpx;
		float: left;
		line-height: 60rpx;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		letter-spacing: 1rpx;
		font-size: 26rpx;
		color: #333;
		border-radius: 0 0 8rpx 8rpx;
	}

	/* 瀑布流列表 */
	.tui-container {
		width: 100%;
		padding: 20rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.tui-extend-box {
		flex: 1;
		margin-right: 10rpx;
	}

	.tui-extend-box:last-child {
		margin-right: 0;
	}

	.tui-extend-item {
		/* display: inline-block; */
		width: 100%;
		margin-bottom: 10rpx;
		box-sizing: border-box;
		color: #fff;
		font-family: "Microsoft YaHei";
		text-align: justify;
		word-break: break-all;
		word-wrap: break-word;
		position: relative;
		background: #fff;
		border-radius: 8rpx;
	}

	.tui-extend-item .image {
		width: 100%;
		max-height: 340rpx;
		border-radius: 8rpx 8rpx 0 0;
	}

	.tui-extend-item::before {
		content: '';
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		border-radius: 8rpx;
	}

	.tui-extend-item .item-content {
		padding: 10rpx 20rpx;
		box-sizing: border-box;
		width: 100%;
		border-radius: 0 0 8rpx 8rpx;
	}

	.tui-title {
		font-size: 30rpx;
		line-height: 45rpx;
		font-weight: bold;
		letter-spacing: 1rpx;
		position: relative;
		color: #333;
	}

	.bottom {
		display: flex;
		margin-top: 20rpx;
		align-items: center;
	}

	.bottom>view:nth-child(1) {
		font-weight: bold;
	}

	.bottom>view:nth-child(2) {
		color: #999999;
		font-size: 20rpx;
		margin-left: 20rpx;
	}

	.tui-sub-title {
		font-size: 24rpx;
		margin-top: 10rpx;
		letter-spacing: 1rpx;
		color: #999999;
		position: relative;
		z-index: 1;
	}

	.tui-footer {
		padding-top: 60rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
		z-index: 10;
		height: 44rpx;
	}

	.tui-r-icon {
		padding-left: 16rpx;
		padding-bottom: 5rpx;
	}

	.tui-l-icon {
		padding: 0 10rpx 5rpx 8rpx;
	}

	.tui-btn {
		background: none;
		padding: 0;
		margin: 0;
		display: inline;
	}

	.tui-bg-1 {
		background: #282537;
		background-image: -webkit-radial-gradient(top, circle cover, #3c3b52 0%, #252233 80%);
		background-image: radial-gradient(top, circle cover, #3c3b52 0%, #252233 80%);
	}

	.tui-bg-2 {
		background: #092756;
		background: -webkit-radial-gradient(0% 100%, ellipse cover, rgba(104, 128, 138, 0.4) 10%, rgba(138, 114, 76, 0) 40%),
			-webkit-linear-gradient(top, rgba(57, 173, 219, 0.25) 0%, rgba(42, 60, 87, 0.4) 100%),
			-webkit-linear-gradient(-45deg, #670d10 0%, #092756 100%);
		background: -webkit-radial-gradient(0% 100%, ellipse cover, rgba(104, 128, 138, 0.4) 10%, rgba(138, 114, 76, 0) 40%),
			linear-gradient(to bottom, rgba(57, 173, 219, 0.25) 0%, rgba(42, 60, 87, 0.4) 100%),
			linear-gradient(135deg, #670d10 0%, #092756 100%);
	}

	.tui-bg-3 {
		background-image: linear-gradient(#8b9da9, #fff6e4);
		box-shadow: inset 0 0 100px hsla(0, 0%, 0%, 0.3);
	}

	.tui-bg-4 {
		background: rgb(105, 155, 200);
		background: -webkit-gradient(radial, top left, 0px, top left, 100%, color-stop(0%, rgba(105, 155, 200, 1)), color-stop(57%, rgba(181, 197, 216, 1)));
		background: -webkit-radial-gradient(top left, ellipse cover, rgba(105, 155, 200, 1) 0%, rgba(181, 197, 216, 1) 57%);
	}

	.tui-bg-5 {
		background-image: linear-gradient(45deg, rgba(194, 233, 221, 0.5) 1%, rgba(104, 119, 132, 0.5) 100%),
			linear-gradient(-45deg, #494d71 0%, rgba(217, 230, 185, 0.5) 80%);
	}

	.tui-bg-6 {
		background: rgb(244, 226, 156);
		background: -webkit-linear-gradient(-45deg, rgba(244, 226, 156, 0) 0%, rgba(59, 41, 58, 1) 100%),
			-webkit-linear-gradient(left, rgba(244, 226, 156, 1) 0%, rgba(130, 96, 87, 1) 100%);
		background: linear-gradient(135deg, rgba(244, 226, 156, 0) 0%, rgba(59, 41, 58, 1) 100%),
			linear-gradient(to right, rgba(244, 226, 156, 1) 0%, rgba(130, 96, 87, 1) 100%);
	}

	/* 设计定位到顶部 */
	.filter-style {
		width: 100%;
		height: 100rpx;
	}
</style>

<style>
	.uni-tag--small {
		height: 35rpx !important;
		padding: 0px 10rpx !important;
		line-height: calc(35rpx - 2px) !important;
		font-size: 22rpx !important;
		margin-right: 10rpx;
	}
</style>
